<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS3背景</title>
		<style type="text/css">
			/**
			 * background-size 规定背景图片的尺寸。
			 *
			 * background-origin 规定背景图片的定位区域:
			 *	默认值：padding-box
			 *		padding-box 背景图像相对于内边距框来定位。 
			 *		border-box 背景图像相对于边框盒来定位。 
			 *		content-box 背景图像相对于内容框来定位。 
			 *
			 *	background-clip 规定背景的绘制区域：
			 *	默认值:border-box
			 *	border-box 背景被裁剪到边框盒
			 *	padding-box 背景被裁剪到内边距框
			 *	content-box 背景被裁剪到内容框
			 */
			.line {
				text-align: center;
				font: bold 24px Georgia;
				background: url(exercise/img/divider.png) no-repeat bottom center;
				padding: 6px 0px 20px;
			}

			.box1,
			.box2,
			.box3,
			.box4 {
				border: 4px #444444 dotted;
				margin: 1em 0;
				padding: 1.4em;
				background: linear-gradient(60deg, red, yellow, red, yellow, red);
				font: 900 1.2em sans-serif;
				text-decoration: underline;
			}

			.box1 {
				background-clip: border-box;
			}

			.box2 {
				background-clip: padding-box;
			}

			.box3 {
				background-clip: content-box;
			}

			.box4 {
				background-clip: text;
				-webkit-background-clip: text;
				color: rgba(0, 0, 0, .2);
			}

			/* ----------------------------- */
			.example {
				border: 10px double;
				padding: 20px;
				background: url(exercise/img/item/sub_img3.png);
				background-position: center left;
				/* 背景将在内容区padding内部填充 */
				background-origin: content-box;
			}

			.example2 {
				border: 10px double;
				padding: 20px;
				background: url(exercise/img/item/sub_img3.png);
				background-position: center left;
				background-origin: border-box;
			}

			.example3 {
				border: 10px double;
				padding: 20px;
				background-image: url(exercise/img/item/sub_img3.png);
				background-position: center left;
				background-origin: padding-box;
			}
		</style>
	</head>
	<body>
		<div>
			<h1 class="line">background-clip</h1>

			<p class="box1">The background extends behind the border.</p>
			<p class="box2">The background extends to the inside edge of the border.</p>
			<p class="box3">The background extends only to the edge of the content box.</p>
			<p class="box4">The background is clipped to the foreground text.</p>

		</div>

		<div>
			<h1 class="line">background-origin</h1>
			<p class="example"></p>
			<p class="example2"></p>
			<p class="example3"></p>

		</div>


	</body>
</html>
